<template>
  <div class="collection">
    <header>
      <a href="https://www.jd.com/?cu=true&utm_source=haosou-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_haosoupinzhuan&utm_term=0a875d61c5fe47d8bc48679132932d23_0_2702c6f4ae1c4cd191c1ee4398e2e21b" class="logo"><img src="img/logo1.jpg" alt=""></a>
      <div class="desc">欢迎注册</div>
      <div class="dfg">
        <span>已有账号？</span>
        <a class="loginButton" @click="loginButton()">请登录</a>
      </div>
    </header>
    <section>
      <el-form action="" class="one" ref="registerForm" :model="registerForm" :rules="registerRules">

        <el-form-item prop="username">
          <div class="register-box">
            <label for="username" class="username_label">用 户 名
            </label>
            <el-input ref="username" v-model="registerForm.username" maxlength="20" type="text" placeholder="您的用户名和登录名"
                      name="username"
                      tabindex="1"
                      autocomplete="on"/>

            <div class="tips"></div>
          </div>
        </el-form-item>

        <el-form-item prop="password">
          <div class="register-box">
            <label for="password" class="other_label">设 置 密 码
            </label>
            <el-input ref="password" v-model="registerForm.password" maxlength="20" type="password" placeholder="建议至少使用两种字符组合"/>
            <div class="tips">
            </div>
          </div>
        </el-form-item>

        <el-form-item prop="surePassword">
          <div class="register-box">
            <label for="surePassword" class="other_label">确 认 密 码
            </label>
            <el-input ref="surePassword" v-model="registerForm.surePassword" maxlength="20" type="password" placeholder="请再次输入密码" />
            <div class="tips">

            </div>
          </div>
        </el-form-item>

        <el-form-item prop="phone">
          <div class="register-box">
            <label for="phone" class="other_label">
              中国 0086
            </label>
            <el-input ref="phone" v-model="registerForm.phone" class="phone" maxlength="20" type="text" placeholder="建议使用常用手机" />
            <div class="tips">
            </div>
          </div>
        </el-form-item>

        <el-form-item prop="code">
          <div class="register-box">
            <label for="code" class="other_label">验 证 码
            </label>
            <el-input ref="code" v-model="registerForm.code" maxlength="20" type="text" placeholder="请输入验证码"/>
            <div class="tips">

            </div>
          </div>
        </el-form-item>

        <span id="code" @click="sendCode()">{{ codeText }}</span>

        <div class="arguement">
          <input type="checkbox" id="xieyi" v-model="agree"> 阅读并同意
          <a href="#">《MaxLen 商城用户注册协议》</a>
          <a href="#">《隐私政策》</a>
          <div class="tips">
            <span v-if="agree ? !agree : agreeText" style="color: red;font-size: 10px">请阅读并同意</span>
            <span v-else style="color: rgb(245,245,245);font-size: 10px">请阅读并同意</span>
          </div>
          <br />
        </div>

        <div class="submit_btn submitButton">
          <div class="submitButton" @click="registerButton()">立 即 注 册</div>
        </div>
      </el-form>


      <div class="two">
        <div class="right_r">
          <div class="right_r1">
            <img :src="require('@/assets/login/a65a18e877a16246a92e1b755bd88a03_03.png')"/>
            <span>企业用户注册</span>
          </div>
          <div class="right_r2">
            <img :src="require('@/assets/login/a65a18e877a16246a92e1b755bd88a03_06.png')"/>
            <span>INTERNATIONAL <br /> CUSTOMERS</span>
          </div>
        </div>
      </div>
    </section>
    <br /><br />
    <hr style="width: 1300px;margin: 0 auto;color: #E7E7E7">
    <div class="footer">
      <ul>
        <li>
          <a>关于我们</a>
        </li>
        <li>|</li>
        <li>
          <a>联系我们</a>
        </li>
        <li>|</li>
        <li>
          <a>人次招聘</a>
        </li>
        <li>|</li>
        <li>
          <a>商家入驻</a>
        </li>
        <li>|</li>
        <li>
          <a>广告服务</a>
        </li>
        <li>|</li>
        <li>
          <a>MaxLen 商城</a>
        </li>
        <li>|</li>
        <li>
          <a>友情链接</a>
        </li>
        <li>|</li>
        <li>
          <a>销售联盟</a>
        </li>
        <li>|</li>
        <li>
          <a>MaxLen 商城社区</a>
        </li>
        <li>|</li>
        <li>
          <a>MaxLen 商城公益</a>
        </li>
        <li>|</li>
        <li>
          <a>English Site</a>
        </li>
      </ul>
    </div>
    <p class="bq">Copyright©2004-2016 MaxLen.com 版权所有</p>
    <br /><br />

  </div>
</template>

<script>

export default {
  name: 'Register',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 3 || value.length > 10) {
        callback(new Error('用户名不能小于 3 个字或大于 10 个字'))
      } else {
        this.$store.dispatch('member/isExistUsername', {"username": value})
          .then(()=>{
            callback()
          })
          .catch(()=>{
            callback(new Error('用户名已存在'))
          })
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6 || value.length > 20) {
        callback(new Error('密码不能小于 6 位或大于 20 位'))
      } else {
        callback()
      }
    }
    const validateSurePassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error('两次密码不相同'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]{9}$/
      if(value.length <= 0){
        callback(new Error('请输入手机号'))
      }
      else if (!reg.test(value)) {
        callback(new Error('格式错误'))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error('验证码为 6 位'))
      } else {
        callback()
      }
    }
    return {
      codeText: '点击按钮进行验证',
      codeInt: 60,
      agree: false,
      agreeText: false,
      registerForm: {
        username: '',
        password: '',
        surePassword: '',
        phone: '',
        code: ''
      },
      registerRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        surePassword: [{ required: true, trigger: 'blur', validator: validateSurePassword }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }],
      }
    }
  },
  created() {

  },
  methods: {
    registerButton(){
      if(this.agree){
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            this.$store.dispatch('member/register', this.registerForm)
              .then(() => {
                this.$message.success("注册成功")
                this.$router.push({
                  path: "/redirectLogin",
                  query: {
                    username: this.registerForm.username
                  }
                });
              })
              .catch(() => {
              })
          }
        })
      }else{
        this.agreeText = true
      }
    },
    loginButton(){
      this.$router.push({
        path: "/login"
      });
    },
    sendCode(){
      if(this.codeText === '点击按钮进行验证') {
        this.$refs.registerForm.validateField('phone', valid => {
          if (valid === '') {
            this.$store.dispatch('member/isExistPhone', {"phone": this.registerForm.phone})
              .then(()=>{
                this.$store.dispatch('member/sendCode', {'phone': this.registerForm.phone})
                  .then(() => {
                    this.codeInt = 60
                    this.timeoutChangeStyle()
                  })
                  .catch(() => {})
              })
              .catch(()=>{})
          }
        })
      }
    },
    timeoutChangeStyle(){
      this.codeText = '验证码已发送 ' + this.codeInt + ' s'
      this.codeInt -= 1
      if(this.codeInt >= 0){
        setTimeout(()=>{
          this.timeoutChangeStyle()
        },1000)
      }else{
        this.codeText = '点击按钮进行验证'
      }
    }
  },
  watch:{
  }
}
</script>

<style lang="scss">

.el-form-item__content{
  height: 60px;
}
.el-form-item__error{

}

.el-input{
  width: 0px;
}
.el-input--medium .el-input__inner{
  display: inline-block;
  width: 286px;
  height: 60px;
  padding-bottom: 11px;
  padding-left: 18px;
  padding-top: 16px;
  font-size: 14px;
  font-family: "Microsoft YaHei", "Hiragino Sans GB";
  background-color: rgb(245,245,245);
  margin-top: -1px;
  margin-bottom: -1px;
  border-radius: 0px;
}
</style>

<style lang="scss" scoped>

.collection {
  background-color: rgb(245,245,245);
  margin: 0 auto;
}
/*国际惯例*/
* {
  //margin: 0;
  padding: 0;
}

body,
html {
  width: 1366px;
  background-color: white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: 微软雅黑;
  align-items: center;
}

body a,
html a {
  text-decoration: none;
}

body ul,
body li,
html ul,
html li {
  list-style: none;
}
/*常用标签的样式重置*/

i {
  font-style: normal;
}

a {
  text-decoration: none;
}

input {
  outline: none;
  border: none;
}

.submitButton{
  background-color: rgb(60,133,39);
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: white;

  &:hover{
    cursor: pointer;
  }
}

/*设定html和body的宽度为100%*/
.laoda{
  width: 1366px;
  height: 680px;
  background: #D9D9D9;
  position: fixed;
  z-index: 999;
  cursor: pointer;
}
html,
body {
  width: 100%;
  font: 14px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #666;
}
/*头部*/

.logo {
  width: 140px;
  height: 40px;
  //background: url(../img/icon.png) no-repeat;
  position: absolute;
  top: 20px;
  left: 35px;
}

.desc {
  font-size: 22px;
  line-height: 15px;
  position: absolute;
  left: 300px;
  top: 40px;
  padding-left: 20px;
  font-weight: bold;
}

.dfg {
  font-size: 16px;
  margin-left: 1450px;
  float: left;
  margin-top: 60px;

  .loginButton{
    color: rgb(60,133,39);

    &:hover{
      text-decoration: underline;
    }
  }
}

.dfg a {
  color: black;
}

.dfg a:hover {
  border-bottom: 1px solid black;
}

header {
  width: 100%;
  height: 110px;
  box-shadow: 10px 10px 10px rgba(111, 111, 111, .1);
  background-color: white;
}
/*注册信息*/
/*总体布局*/

section {
  width: 1100px;
  height: 700px;
  display: flex;
  justify-content: space-around;
  margin-left: 400px;
}

form {
  width: 500px;
  height: 550px;
  margin: auto;
  margin-top: 80px;
  float: left;
  margin-left: 100px;
  border-right: 1px solid #E7E7E7;
  padding: 0px 100px 0px 0px;
}
.two .right_r{
  margin-right: 150px;
  margin-top: 80px;
}
.two .right_r1{
  width: 150px;
  height: 60px;
  border-bottom: 1px solid #E7E7E7;
}
.two .right_r1>span{
  color: #999999;
  margin-left: 15px;
}
.two .right_r1>span:hover{
  border-bottom: 1px solid black;
  color: black;
}
.two .right_r2{
  width: 150px;
  height: 50px;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.two .right_r2>span{
  color: #999999;
  margin-left: 15px;
}
.two .right_r2>span:hover{
  color: black;

}

.one .register-box {
  border: 1px solid #ddd;
  margin-bottom: 32px;
}

.one .register-box label {
  height: 52px;
  line-height: 52px;
  padding-left: 20px;
  display: inline-block;
  color: rgb(102, 102, 102);
}

.one .register-box el-input {
  width: 286px;
  height: 52px;
  padding-bottom: 11px;
  padding-left: 18px;
  padding-top: 16px;
  font-size: 14px;
  font-family: "Microsoft YaHei", "Hiragino Sans GB";
  background-color: rgb(245,245,245);
  /*color: red !important;*/
}
.one .register-box input::placeholder{
  color: rgb(204,204,204);
}
.one .register-box input:-ms-input-placeholder{
  color: rgb(204,204,204);
}
.one .register-box .tips {
  position: absolute;
  margin-top: 5px;
  font-size: 14px;
  color: #ccc;
}
/*用户名*/

.one .register-box .username_label {
  display: inline-block;
  width: 113px;
  word-spacing: 10px;
  font-weight: normal;
}
/*密码，确认密码，*/

.one .register-box .other_label {
  display: inline-block;
  width: 113px;
  word-spacing: 2px;
  font-weight: normal;
}
/*手机号*/

.one .register-box span {
  display: inline-block;
  width: 90px;
  height: 52px;
  border-left: 1px solid #ddd;
  border-top: 1px solid whitesmoke;
  border-bottom: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
}

.one .register-box .phone {
  //padding-left: 18px;
}
/*验证码*/

#code {
  border: 1px solid #ddd;
  display: inline-block;
  width: 400px;
  height: 55px;
  //vertical-align: middle;
  //background-color: black;
  font-size: 15px;
  text-align: center;
  line-height: 55px;
  margin-bottom: 20px;

  &:hover{
    cursor: pointer;
    border: 1px solid rgb(60,133,39);
  }
}
/*协议*/

.arguement {
  //margin-bottom: 10px;
}

.arguement input {
  vertical-align: middle;
}

.arguement a {
  color: #38f;
  text-decoration: none;
  font-size: 12px;
}
/*提交按钮*/

.submit_btn button {
  width: 100%;
  height: 54px;
  color: #fff;
  background: rgb(60,133,39);
  border: 0;
  font-size: 16px;
  font-family: "Microsoft YaHei", "Hiragino Sans GB";

  &:hover{
    cursor: pointer;
  }
}

.footer ul {
  width: 1100px;
  margin: 0 auto;
  height: 31px;
  display: flex;
  align-items: center;
}

.footer ul li {
  color: #999;
  margin-left: 14px;
}

.footer ul li a {
  color: #999;
  font-size: 12px;
}

.footer ul li a:hover {
  border-bottom: 1px solid #999999;
}

.bq {
  text-align: center;
  font-size: 12px;
  color: #999;
}
.one .register-box{
  width: 400px;

}
.one .register-box span{
  width: 90px;
  height: 52px;
}
.caa{
  width: 160px !important;
  margin-left: 20px;
}

</style>
